﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "销售出库管理";
    Layout = "_Layout";
}

<style>
    .search-form { 
        background: #fff; 
        padding: 20px; 
        margin-bottom: 15px; 
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .search-form .layui-form-item { 
        margin-bottom: 15px; 
    }
    .search-form .layui-inline { 
        margin-right: 15px; 
        margin-bottom: 10px; 
    }
    .search-form .layui-form-label { 
        width: 80px; 
        text-align: right; 
        padding: 9px 10px; 
    }
    .search-form .layui-input-inline { 
        width: 180px; 
    }
    .btn-group { 
        background: #fff; 
        padding: 15px 20px; 
        margin-bottom: 15px; 
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .table-container { 
        background: #fff; 
        padding: 0; 
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .page-header {
        background: #fff;
        padding: 15px 20px;
        margin-bottom: 15px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }
</style>

<div class="page-header">
    销售出库管理
</div>

<!-- 搜索条件 -->
<div class="search-form">
    <form class="layui-form" lay-filter="searchForm">
        <div class="layui-form-item" style="margin-bottom: 15px;">
            <div class="layui-inline">
                <label class="layui-form-label">出库单编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="saleCode" placeholder="请输入出库单编号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">销售订单编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="salesOrders" placeholder="请输入销售订单编号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="customerName" placeholder="请输入客户名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 15px;">
            <div class="layui-inline">
                <label class="layui-form-label">出库日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="saleDateStart" placeholder="开始日期" autocomplete="off" class="layui-input" id="saleDateStart">
                </div>
            </div>
            <div class="layui-inline" style="width: 30px; text-align: center;">
                <div class="layui-form-mid" style="margin: 0; padding: 0;">-</div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="margin-left: 0;">
                    <input type="text" name="saleDateEnd" placeholder="结束日期" autocomplete="off" class="layui-input" id="saleDateEnd">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">单据状态</label>
                <div class="layui-input-inline">
                    <select name="state" lay-search="">
                        <option value="">请选择状态</option>
                        <option value="0">草稿</option>
                        <option value="1">已完成</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 0;">
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="search">
                    <i class="layui-icon layui-icon-search"></i> 查询
                </button>
                <button class="layui-btn layui-btn-primary" type="reset">
                    <i class="layui-icon layui-icon-refresh"></i> 重置
                </button>
            </div>
        </div>
    </form>
</div>

<!-- 操作按钮 -->
<div class="btn-group">
    <button class="layui-btn" id="addBtn">
        <i class="layui-icon layui-icon-add-1"></i> 新增
    </button>
    <button class="layui-btn layui-btn-normal" id="editBtn">
        <i class="layui-icon layui-icon-edit"></i> 编辑
    </button>
    <button class="layui-btn layui-btn-danger" id="deleteBtn">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </button>
</div>

<!-- 数据表格 -->
<div class="table-container">
    <table class="layui-hide" id="saleTable" lay-filter="saleTable"></table>
</div>

<!-- 状态模板 -->
<script type="text/html" id="stateTpl">
    {{# if(d.state == 0){ }}
        <span class="layui-badge layui-bg-gray">草稿</span>
    {{# } else if(d.state == 1) { }}
        <span class="layui-badge layui-bg-green">已完成</span>
    {{# } }}
</script>

@section scripts {
    <script>
        layui.use(['table', 'form', 'laydate', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;

            // 初始化日期选择器
            laydate.render({
                elem: '#saleDateStart',
                type: 'date'
            });
            laydate.render({
                elem: '#saleDateEnd',
                type: 'date'
            });

            // 初始化表格
            var tableIns = table.render({
                elem: '#saleTable',
                url: '/Sale/GetSale',
                method: 'GET',
                page: true,
                loading: true,
                even: true,
                cols: [[
                    { type: 'checkbox', fixed: 'left', width: 50 },
                    { field: 'saleCode', title: '出库单编号', width: 160, sort: true },
                    { field: 'saleName', title: '出库单名称', width: 200 },
                    { field: 'salesOrders', title: '销售订单编号', width: 150 },
                    { field: 'customerCode', title: '客户编码', width: 120 },
                    { field: 'customerName', title: '客户名称', width: 150 },
                    { field: 'saleDate', title: '出库日期', width: 120, templet: function (d) { 
                        return d.saleDate ? layui.util.toDateString(new Date(d.saleDate), 'yyyy-MM-dd') : ''; 
                    }},
                    { field: 'state', title: '单据状态', width: 100, templet: '#stateTpl', align: 'center' }
                ]],
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                text: {
                    none: '暂无相关数据'
                }
            });

            // 搜索
            form.on('submit(search)', function (data) {
                tableIns.reload({
                    where: data.field,
                    page: { curr: 1 }
                });
                return false;
            });

            // 重置表单
            form.on('reset', function () {
                tableIns.reload({
                    where: {},
                    page: { curr: 1 }
                });
            });

            // 新增按钮
            $('#addBtn').on('click', function () {
                layer.open({
                    type: 2,
                    title: '添加销售出库单',
                    content: '/Sale/Add',
                    area: ['850px', '650px'],
                    maxmin: true,
                    success: function (layero, index) {
                        // 弹窗打开成功回调
                    },
                    end: function () {
                        // 刷新表格
                        tableIns.reload();
                    }
                });
            });

            // 编辑按钮
            $('#editBtn').on('click', function () {
                var checkStatus = table.checkStatus('saleTable');
                if (checkStatus.data.length == 0) {
                    layer.msg('请选择要编辑的数据', { icon: 2 });
                    return;
                }
                if (checkStatus.data.length > 1) {
                    layer.msg('只能选择一条数据进行编辑', { icon: 2 });
                    return;
                }
                var data = checkStatus.data[0];
                layer.open({
                    type: 2,
                    title: '编辑销售出库单',
                    content: '/Sale/Edit?id=' + data.id,
                    area: ['800px', '600px'],
                    maxmin: true,
                    success: function (layero, index) {
                        // 弹窗打开成功回调
                    },
                    end: function () {
                        // 刷新表格
                        tableIns.reload();
                    }
                });
            });

            // 删除按钮
            $('#deleteBtn').on('click', function () {
                var checkStatus = table.checkStatus('saleTable');
                if (checkStatus.data.length == 0) {
                    layer.msg('请选择要删除的数据', { icon: 2 });
                    return;
                }
                layer.confirm('确定删除选中的数据吗？', { icon: 3, title: '删除确认' }, function (index) {
                    var ids = [];
                    layui.each(checkStatus.data, function (i, item) {
                        ids.push(item.id);
                    });
                    
                    // 批量删除
                    var loadingIndex = layer.load(2);
                    var deletePromises = ids.map(function (id) {
                        return $.ajax({
                            url: '/Sale/DeleteSale',
                            type: 'DELETE',
                            data: { saleId: id }
                        });
                    });
                    
                    Promise.all(deletePromises).then(function () {
                        layer.close(loadingIndex);
                        layer.close(index);
                        layer.msg('删除成功', { icon: 1 });
                        tableIns.reload();
                    }).catch(function () {
                        layer.close(loadingIndex);
                        layer.msg('删除失败', { icon: 2 });
                    });
                });
            });
        });
    </script>
}